.container {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 150vh; /* 确保元素初始状态不在视口内 */
}
.scroll-container {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory; /* 水平滚动并强制对齐 */
  scroll-padding: 10px; /* 滚动容器的内边距 */
}

.scroll-item {
  flex: 0 0 100%; /* 每个子元素占据整个容器宽度 */
  scroll-snap-align: start; /* 子元素的起始边缘与容器的起始边缘对齐 */
  scroll-snap-stop: always;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  text-align: center;
}
